<template>
	<scroll-view scroll-y class="scroll-view" @scrolltolower="onScrolltolower">
		<view class="find-box wrap">
		  <view class="logo">GuessBear</view>
		</view>
        <swiper class="swiper" autoplay="true" interval="4000" circular="true" duration="500">
          <swiper-item v-for="(item,index) in bannerList" :key="index">
            <image :src="item.img_url"></image>
          </swiper-item>
        </swiper>
        <view class="gheader" v-if="juzhanglist.length != 0">
          <view style="margin-top:60upx">
            <view style="width:100%;height:460upx;margin:0 auto;">
              <scroll-view style="width:100%;height:100%" scroll-y="true">
                <view class="ghbox" v-for="(item,index) in juzhanglist" :key="index" @click="toBuy(item)">
                  <image :src="item.img_url" class="ghboximg"></image>
                  <view class="ghright">
                    <view class="ghtext van-multi-ellipsis--l2">{{item.goods_name}}</view>
                    <view class="ghmoney">￥{{item.price}}<text class="ghshou">已售{{item.sell_count}}件</text></view>
                    <view class="ghmtouch">手气值{{item.luck}}</view>
                  </view>
                  <view class="ghbutton">去购买</view>
                </view>
              </scroll-view>
            </view>
          </view>
        </view>
        <view>
            <view class="scroll-item" v-for="(item,index) in allGoodsList" :key="index" @click="toBuy(item)">
              <image :src="item.img_url"></image>
              <view class="title">{{item.goods_name}}</view>
              <view class="money">￥{{item.price}}</view>
              <view class="sales">已售{{item.sell_count}}件</view>
              <view class="luckly">手气值：{{item.luck}}</view>
            </view>
        </view>
        <!-- <view>到底了</view> -->
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [],
                juzhanglist: [],
                allGoodsList: [
                    
                ],
                allGoodsForm: {
                    limit: 10,
                    page: 1
                }
			}
		},
		methods: {
			onScrolltolower() {
                this.allGoodsForm.page += 1;
                this.getAllGoods();
			},
            toBuy(item) {
                if (item.affiliation == 0) {
                    this.navigateTo("/pages/buyJuzhang/buyJuzhang?item="+JSON.stringify(item))
                } else {
                    this.navigateTo("/pages/buyJuzhang/buyJuzhang?item="+JSON.stringify(item))
                }
                
            },
            getAllGoods() {
                this.$api.getAllGoods(this.allGoodsForm).then(res=>{
                    if (this.allGoodsForm.page == 1) {
                        this.allGoodsList = res.data;
                    } else {
                        this.allGoodsList = this.allGoodsList.concat(res.data)
                    }
                })
            },
            getjuzhangGoods() {
                if (uni.getStorageSync("userInfo")) {
                    this.$api.getjuzhangGoods({uid: true}).then(res=>{
                        this.juzhanglist = res.data;
                    }) 
                }
            }
		},
        created() {
            this.$api.getBanner({type:1}).then(res=>{
                this.bannerList = res.data;
            })
            this.getjuzhangGoods();
            this.getAllGoods();
        }
        
	}
</script>

<style>
    .gheader {
        background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/ghju1.png?sign=f56e143228bb84c527a7fe580fea60a3&t=1611209932')
    }
    .swiper {
        height: 456upx;
    }
    .swiper image {
        width: 100%;
        height: 456upx;
    }
    .scroll-view {
        height: calc(100vh - 48px);
        padding: 2vw;
        box-sizing: border-box;
    }
    .find-box {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .logo {
        left: 60upx;
        font-size: 52upx;
        font-weight: 550;
        background: linear-gradient(to right, #1ae8c8, #4a8aff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        transform: skew(-10deg);
        background-image: -webkit-linear-gradient(right,#75df75,#38afec);
        letter-spacing: -2upx;
        animation: myfirst 8s;
        -webkit-animation: myfirst 8s infinite linear;

    }
    .gheader{
      height: 522upx;
      border-radius: 14upx;
      margin: 10upx auto;
      padding: 20upx;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    
    .ghbox{
      width: 88%;
      margin: 0 auto 20upx;
      height: 162upx;
      background-color: white;
      padding: 20upx;
      display: flex;
      border-radius: 14upx;
      position: relative;
    }
    .ghboximg{
      width: 120upx;
      height: 120upx;
      background-color: #ccc;
      align-self: center;
      float: left;
      margin-right: 30upx;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .ghright{
      width: calc(100% - 160upx);
      height: 100%;
      float: right;
    }
    .ghtext{
      font-size: 28upx;
      width: 100%;
    }
    .ghmoney{
      font-size: 26upx;
      color: red;
      font-weight: 550;
      margin: 10upx 0;
    }
    .ghshou{
      font-size: 22upx;
      color: #333;
      font-weight: 100;
      margin-left: 10upx;
    }
    .ghmtouch{
      display: inline-block;
      padding: 0 5px;
      max-width: 260upx;
      height: 34upx;
      text-align: center;
      line-height: 34upx;
      font-size: 20upx;
      color: white;
      border-radius: 20upx;
      background: linear-gradient(90deg, #EF1B21 0%, #F868A1 100%);
    }
    .ghbutton{
      width: 166upx;
      padding: 10upx 10upx;
      height: 50upx;
      line-height: 50upx;
      position: absolute;
      right:10upx;
      font-size: 30upx;
      color: white;
      bottom: 16upx;
      border-radius: 10upx;
      text-align: center;
      background: linear-gradient(0deg, #60CC60 0%, #79E379 100%);
    }
    .guizebox {
      width: 600upx;
      height: 800upx;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: calc(50% - 400upx);
      left: 0;
      right: 0;
      margin: 0 auto;
    }
    .scroll-item {
      width: 38.1vw;
      display: inline-block;
      box-shadow: 0 0 10px rgba(0,0,0,.2);
      border-radius: 4px;
      background: #fff;
      margin: 15rpx 2vw;
      padding: 20rpx;
      white-space: nowrap;
      text-align: center;
    }
    .scroll-item image {
      width: 38.1vw;
      height: 38.1vw;
    }
    .scroll-item .title {
      width: 38.1vw;
      font-size: 12px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      white-space: normal;
      text-align: center;
      min-height: 64rpx;
    }
    .scroll-item .luckly {
      margin-top: 5px;
      background-image:-webkit-linear-gradient(right,#F868A1,#EF1B21);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      font-size: 20rpx;
    }
    .scroll-item .sales {
      color: #b3b3b3;
      font-size: 10px;
    }
    .scroll-item .money {
      font-size: 28rpx;
      color: #f00;
      word-break: break-all;
    }
</style>
